<template>
  <el-dialog
    title="系统消息"
    :visible.sync="dialogVisible"
    width="95%">
    <div id="message-dialog-content" :style="{
      height:(this.getWinSize().height-500)+'px'
    }" v-if="message.id>0">
      <div class="item title">
        {{ message.title }}
      </div>
      <div class="item content">
        {{ message.content }}
      </div>
      <div class="item created-time">
        {{ message.createdTime }}
      </div>
      <div class="c"></div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="detail">查看详情</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'MessageDialog',
  data: function () {
    return {
      dialogVisible: false,
      content: '',
      id: 0,
      message: {
        id: 0,
        // type: 'ORDER',
        // params: 52,
        // title: '订单发货消息',
        // content: '您购买的商品【可口可乐*3】,【果粒橙*2】,【金鸽瓜子*1】...等商品，商家已经发货',
        // createdTime: '2022-12-27 21:15:27',

        type: 'ORDER_APPLY',
        params: 3,
        title: '退货单处理消息',
        content: '您申请的退货商品【可口可乐*3】,【果粒橙*2】,【金鸽瓜子*1】...等商品，商家已经同意',
        createdTime: '2022-12-27 21:15:27'
      },
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('MessageDialogCallBus', function (id) {
      // $this.$message.success('id: '+id)
      $this.id = id
      $this.open()
    })
  },
  watch:{
    dialogVisible:function () {
      if (!this.dialogVisible){
        this.id=0
        this.message.id=0
      }
    }
  },
  methods: {
    open: function () {
      let $this = this
      $this.dialogVisible = true
      $this.$forceUpdate()
      $this.MyRequest($this.ApiDoNameMember + 'Member/getMessageDetail', {id:this.id}, function (data) {
        // $this.$alert(JSON.stringify(data))
        $this.message = data
        $this.$forceUpdate()
      },function (res) {
        $this.$message.error('请求错误: '+JSON.stringify(res))
      })
    },
    detail: function () {
      if (this.message.type.id === 'ORDER') {
        this.$router.push({
          name: 'OrderDetail',
          query: {
            id: this.message.params
          }
        })
        this.dialogVisible = false
        this.$forceUpdate()
      }
      if (this.message.type.id === 'ORDER_APPLY') {
        this.$router.push({
          name: 'OrderApply',
          query: {
            applyId: this.message.params
          }
        })
        this.dialogVisible = false
        this.$forceUpdate()
      }
    }
  }
}
</script>

<style scoped>

</style>
